<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		     功能：1.应用于表格【栅格布局】
			      2.行内元素与行内块元素对齐方式
				    理解：文本和图片对齐方式【垂直居中】
				    元素种类：
					行内元素：span a 文本【典型】
					特点：在一行内显示 不可设置宽高
					块级元素：div p【典型】
					特点：独占一行 可设宽高
					行内块元素：img【典型】
					特点：在一行内显示 可设宽高
					页面组成：元素之间嵌套生成
					三种元素之间相互嵌套  √  嵌套根据元素特点页面混乱
					嵌套条件1：在一行内显示【效果】
					      块套行 √  推荐
						  行套行 √
						  行套块 √  增加条件 快添加宽高 造成页面布局混乱
						  块套块 √
					嵌套条件2：独占一行【效果】	  
						  块套行 √  推荐
						  行套行 ×
						  行套块 ×  混乱
						  块套块 √
		 -->
		 <style>
			 /* 抓每个img 派生（后代）选择器
			 特点： 抓取父元素中所有（后代）子元素【元素嵌套特点】
			 伪类选择器：特点：在选择器后 过滤符合特定条件某个元素
			 nth：child：选中父元素中第n个
			 符合条件：p中包含4个img
			 id抓取父元素：空间大
			 class抓取父元素中子元素：微调
			 */
			 i mg:nth-child(1){
				 border: 10px solid red;
			 }
			 i mg:nth-child(2){
			 	border: 10px solid yellow;
			 }
			 /* 标准抓取每个img方案 */
			 p img.baseline{
				 vertical-align: baseline;
			 }
			 p img.top{
			 	 vertical-align: top;
			 }
			 p img.middle{
				 vertical-align: middle;
			 }
			 /* vertical-align与text-align区别
			  区别1：属性值不同
			     2.前者操作文本和图片垂直
				   后者操作文本左右和居中以及两边对齐
			  */
			 p img.bottom{
				 vertical-align: bottom;
			 }
		 </style>
		 
	</head>
	<body>
	
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>哪吒<img class="baseline" src="img/img_1.png" alt="哪吒" width="88px" height="88px">基线对齐</p>
		<p>凯蒂猫<img class="top" src="img/img_2.png" alt="凯蒂猫" width="88px" height="88px">顶部对齐</p>
		<p>蜡笔小新<img class="middle" src="img/img_3.png" alt="蜡笔小新" width="88px" height="88px">中间对齐</p>
		<p>小白<img class="bottom" src="img/img_4.png" alt="小白" width="88px" height="88px">底部对齐</p>
		<!-- 需求：垂直方向属性 4个属性值
		 如果 不改变现有html结构 可以找到依次4个img
		 抓每个---4个图片
		 思路：派生选择器+伪类选择器
		 -->
	</body>
</html>